import $ from './jquery.min.js';
$(() => {
    $("dd .addmovies").on('click', function () {
        $.ajax({
            url: '/Directors/getdirector',
            success({ directors }) {
                directorListRender(directors);
            }
        })
        $.ajax({
            url: '/Types/gettype',
            success({ types }) {
                typeListRender(types);
            }
        })
    })

    $("#addMovieImage").on('change', function (e) {
        const files = e.target.files;
        const fd = new FormData();
        fd.append("file", files[0]);
        $.ajax({
            url: '/Films/upload',
            data: fd,
            type: 'post',
            success({ message, path }) {
                console.log(message);
                $("#showImage").prop("src", path);
            },
            contentType: false,
            processData: false,
            cache: false,
        })
    })

    $("#addMoviesBtn").on('click', function () {
        $.ajax({
            url: '/Films',
            data: {
                movieTitle: $("#addMoviesName").val(),
                movieActor: $("#addMoviesActors").val(),
                releaseTime: $("#addMoviesTime").val(),
                movieScore: $("#addMoviesScore").val(),
                movieDirector: $("#addMoviesDirector").val(),
                movieType: $("#addMoviesType").val(),
                movieImage: $("#showImage").prop("src")
            },
            type: 'post',
            success({ status }) {
                if (status == 200) {
                    alert("添加成功");
                } else {
                    alert("该名称已被使用");
                }
            }
        })
    })

    $("dd .moviesList").on('click', function () {
        $.ajax({
            url: '/Films/',
            success({ films }) {
                movieRender(films);
            }
        })
    })

    $("#modifyMoviesBtn").on('click',function() {
        $.ajax({
            url: `/Films`,
            data: {
                movieId: $("#modifyMoviesBtn").attr("data-modifyMovieId"),
                movieTitle: $("#modifyMoviesName").val(),
                movieActor: $("#modifyMoviesActors").val(),
                releaseTime: $("#modifyMoviesTime").val(),
                movieScore: $("#modifyMoviesScore").val(),
                movieDirector: $("#modifyMoviesDirector").val(),
                movieType: $("#modifyMoviesType").val(),
                movieImage: $(".showImage").prop("src")
            },
            type: 'put',
            success({ status }) {
                if (status == 200) {
                    alert("修改成功");
                } else {
                    alert("修改失败");
                }
            }
        })
    })

    $("#MoviesTb").on("click", '#delmovie', function () {
        const movieTitle = $(this).parents('tr').find('.movieTitle').text();
        const result = confirm(`你确定要删除 ${movieTitle} 吗？`);
        if (result) {
            const movieId = $(this).attr("data-movieId");
            $.ajax({
                url: `/Films/${movieId}`,
                type: 'delete',
                success({ films }) {
                    alert("删除成功");
                    movieRender(films);
                }
            })
        }
    })

    $("#search").on('focus', function () {
        $("body").on('keyup', function (e) {
            if (e.key == 'Enter') {
                switch ($("#selectTarget").val()) {
                    case 'name':
                        getMovies();
                        break;
                    case 'actor':
                        getActors();
                        break;
                    case 'dir':
                        getDirectors();
                        break;
                    case 'type':
                        getType();
                        break;
                    default:
                        break;
                }
            }
        })
    })

    $("#MoviesTb").on('click', '#modify', function () {
        $.ajax({
            url: `/Films/${$(this).attr("data-movieId")}`,
            success(data) {
                modifyRender(data)
            }
        })
    })
})

function movieRender(data) {
    $("#MoviesTb").html('');
    let result = data.map(movie =>
        `<tr>
            <td>${movie._id}</td>
            <td class="movieTitle">${movie.movieTitle}</td>
            <td>${movie.movieActor}</td>
            <td>${movie.releaseTime}</td>
            <td>${movie.movieDirector.directorname}</td>
            <td><img width="100" src="${movie.movieImage}"></td>
            <td>${movie.movieType.typename}</td>
            <td>
                <a href="#MoviesUpdate" id="modify" data-movieId="${movie._id}">修改</a>
                <a href="javascript:;" id="delmovie" data-movieId="${movie._id}">删除</a>
            </td>                                    
        </tr>`
    )
    $("#MoviesTb").html(result);
}

function directorListRender(data) {
    $("#addMoviesDirector").html('');
    const result = data.map(director =>
        `<option value="${director._id}">${director.directorname}</option>`
    )
    $("#addMoviesDirector").html(result);
}

function typeListRender(data) {
    $("#addMoviesType").html('');
    const result = data.map(type =>
        `<option value="${type._id}">${type.typename}</option>`
    )
    $("#addMoviesType").html(result);
}

function getMovies() {
    $.ajax({
        url: `/Films/getmoviesearch`,
        data: {
            content: $("#search").val()
        },
        type: 'post',
        success(data) {
            movieRender(data)
        }
    })
}

function getActors() {
    $.ajax({
        url: '/Films/getactorsearch',
        data: {
            content: $("#search").val()
        },
        type: 'post',
        success(data) {
            movieRender(data)
        }
    })
}

function getDirectors() {
    $.ajax({
        url: '/Directors/getdirectorsearch',
        data: {
            content: $("#search").val()
        },
        type: 'post',
        success(data) {
            movieRender(data)
        }
    })
}

function getType() {
    $.ajax({
        url: '/Types/gettypesearch',
        data: {
            content: $("#search").val()
        },
        type: 'post',
        success(data) {
            movieRender(data)
        }
    })
}

function modifyRender(movie) {
    $("#modifyMoviesBtn").attr("data-modifyMovieId",movie._id)
    $("#modifyMoviesName").val(movie.movieTitle);
    $("#modifyMoviesActors").val(movie.movieActor);
    $("#modifyMoviesTime").val(movie.releaseTime);
    $("#modifyMoviesScore").val(movie.movieScore);
    $(".showImage").prop("src", movie.movieImage);
    $.ajax({
        url: '/Directors/getdirector',
        success({ directors }) {
            $("#modifyMoviesDirector").html('');
            const result = directors.map(director =>
                `<option value="${director._id}">${director.directorname}</option>`
            )
            $("#modifyMoviesDirector").html(result);
            // console.log(movie.movieDirector.directorname);
            // $("#modifyMoviesDirector").val(movie.movieDirector.directorname)
        }
    })
    $.ajax({
        url: '/Types/gettype',
        success({ types }) {
            $("#modifyMoviesType").html('');
            const result = types.map(type =>
                `<option value="${type._id}">${type.typename}</option>`
            )
            $("#modifyMoviesType").html(result);
        }
    })
    $("#modifyMovieImage").on('change', function (e) {
        const files = e.target.files;
        const fd = new FormData();
        fd.append("file", files[0]);
        $.ajax({
            url: '/Films/upload',
            data: fd,
            type: 'post',
            success({ message, path }) {
                $(".showImage").prop("src", path);
            },
            contentType: false,
            processData: false,
            cache: false,
        })
    })
}